<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.container{
				position: relative;
				margin:auto;
			}
			.box{
				padding: 10px 0 0 10px;
				/*float: left;*/
			}
			.box img{
				border-radius: 10px;
				box-shadow: 0 0 5px #aaa;
				padding: 10px;
				width: 300px;
				height: auto;
			}
		</style>
	</head>
	<body>
		<div id ='container' class="container">
			<!-- <div class="box">
				<img src="./img/1.png" />
			</div><div class="box">
				<img src="./img/2.jpg" />
			</div><div class="box">
				<img src="./img/3.jpg" />
			</div><div class="box">
				<img src="./img/4.jpg" />
			</div><div class="box">
				<img src="./img/5.jpg" />
			</div><div class="box">
				<img src="./img/6.jpg" />
			</div><div class="box">
				<img src="./img/7.jpg" />
			</div><div class="box">
				<img src="./img/18.jpg" />
			</div><div class="box">
				<img src="./img/9.jpg" />
			</div><div class="box">
				<img src="./img/10.jpg" />
			</div><div class="box">
				<img src="./img/11.jpg" />
			</div><div class="box">
				<img src="./img/12.jpg" />
			</div><div class="box">
				<img src="../img/13.jpg" />
			</div><div class="box">
				<img src="../img/14.jpg" />
			</div><div class="box">
				<img src="../img/15.jpg" />
			</div><div class="box">
				<img src="../img/16.jpg" />
			</div><div class="box">
				<img src="./img/10.jpg" />
			</div><div class="box">
				<img src="./img/11.jpg" />
			</div><div class="box">
				<img src="./img/12.jpg" />
			</div><div class="box">
				<img src="./img/13.jpg" />
			</div><div class="box">
				<img src="./img/14.jpg" />
			</div><div class="box">
				<img src="./img/15.jpg" />
			</div><div class="box">
				<img src="./img/16.jpg" />
			</div> -->
		</div>
		<script>
			let datas = [
				'https://i.loli.net/2018/10/18/5bc76252c639d.jpg',
				'https://i.loli.net/2018/10/18/5bc76379c3a2b.jpg',
				'https://i.loli.net/2018/10/18/5bc76379d7315.jpg',
				'https://i.loli.net/2018/10/18/5bc76379dab61.jpg',
				'https://i.loli.net/2018/10/18/5bc76379de919.jpg',
				'https://i.loli.net/2018/10/18/5bc76379e3997.jpg',
				'https://i.loli.net/2018/10/18/5bc76379e4960.jpg',
				'https://i.loli.net/2018/10/18/5bc761041f867.jpg',
				'https://i.loli.net/2018/10/18/5bc76104334e7.jpg',
				'https://i.loli.net/2018/10/18/5bc76104d8b18.jpg',
				'https://i.loli.net/2018/10/18/5bc76104d9c87.jpg',
				'https://i.loli.net/2018/10/18/5bc76105c5e39.jpg',
				'https://i.loli.net/2018/10/18/5bc76105ed148.jpg',
				'https://i.loli.net/2018/10/18/5bc76106127d0.jpg',
				'https://i.loli.net/2018/10/18/5bc7610624237.jpg',
				'https://i.loli.net/2018/10/18/5bc76106d9bca.jpg',
				'https://i.loli.net/2018/10/18/5bc76379e6cb4.jpg',
				'https://i.loli.net/2018/10/18/5bc76379ebb30.jpg',
				'https://i.loli.net/2018/10/18/5bc76379ec94a.jpg',
				'https://i.loli.net/2018/10/18/5bc76397bf2bf.jpg',
				'https://i.loli.net/2018/10/18/5bc76397c380f.jpg',
				'https://i.loli.net/2018/10/18/5bc76397c57ac.jpg',
				'https://i.loli.net/2018/10/18/5bc76397c7e54.jpg',
				'https://i.loli.net/2018/10/18/5bc76397c92e1.jpg',
				'https://i.loli.net/2018/10/18/5bc76397d167c.jpg',
				'https://i.loli.net/2018/10/18/5bc76397d49ea.jpg',
				'https://i.loli.net/2018/10/18/5bc76397d97ca.jpg'
			]
			let container = document.getElementById('container')
			for (let src of datas) {
				container.appendChild(makeDiv(src))
			}
			function makeDiv(src) {
				let div = document.createElement('div')
				div.className = 'box'
				let img = document.createElement('img')
				img.src = src
				div.appendChild(img)
				return div
			}

			window.onload = function (){
				let container = document.getElementById('container')
				function sortImg(parentEl,className){
					let boxes = [...parentEl.childNodes].filter(val=>{
						return val.className == className 
					})
					//单个图片宽度
					let oWidth = 330
//					console.log(oWidth)
					//列数
					let cols = parseInt(document.documentElement.clientWidth /oWidth)
					//每列高度
					let hArr = []
//					console.log(cols)
					container.style.width = cols*oWidth + 'px'
					boxes.map((val,index)=>{
						val.style.position = 'absolute'
						if(index < cols ){
							val.style.left = index*oWidth +'px'
							hArr.push(val.offsetHeight)
						}else{
							let minH = Math.min.apply(null,hArr)
							let minIndex = hArr.findIndex(val=>{
								return val == minH
							})
							val.style.left = minIndex*oWidth +'px'
							val.style.top = hArr[minIndex] + 'px'
							hArr[minIndex] += val.offsetHeight
						}
					})
//					console.log(hArr)
					
				}
				sortImg(container,'box')
				//添加图片时
				function addImg(parentEl,className){
					let imgData = datas
					for(let val of imgData){
						let oDiv = document.createElement('div')
						oDiv.className = className
						let oImg = document.createElement('img')
						oImg.src = val
						oDiv.appendChild(oImg)
						parentEl.appendChild(oDiv)
					}
					sortImg(container,'box')
				}
				addImg(container,'box')
				window.onscroll =function (){
					if(window.innerHeight + window.pageYOffset > container.lastElementChild.offsetTop
					+ container.lastElementChild.offsetHeight/2){
						addImg(container,'box')
					}
				}
			}
		</script>
		
	</body>
</html>
